//党员基本情况登记表
<template>
    <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="姓名" prop="field113">
                <el-input v-model="formData.field113" placeholder="请输入姓名" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="性别" prop="field117">
                <el-select v-model="formData.field117" placeholder="请选择性别" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in field117Options" :key="index" :label="item.label" :value="item.value"
                        :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生年月" prop="field122">
                <el-date-picker type="month" v-model="formData.field122" format="yyyy-MM" value-format="yyyy-MM"
                    :style="{ width: '100%' }" placeholder="请选择出生年月" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="照片" prop="field123" required>
                <el-upload ref="field123" :file-list="field123fileList" :action="field123Action"
                    :before-upload="field123BeforeUpload">
                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="民族" prop="field124">
                <el-input v-model="formData.field124" placeholder="请输入民族" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="field125">
                <el-input v-model="formData.field125" placeholder="请输入籍贯" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="婚姻状况" prop="field126">
                <el-select v-model="formData.field126" placeholder="请选择婚姻状况" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in field126Options" :key="index" :label="item.label" :value="item.value"
                        :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="入党时间" prop="field127">
                <el-date-picker v-model="formData.field127" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择入党时间" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="转正时间" prop="field128">
                <el-time-picker v-model="formData.field128" format="HH:mm:ss" value-format="HH:mm:ss"
                    :picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
                    placeholder="请选择转正时间" clearable></el-time-picker>
            </el-form-item>
            <el-form-item label="参加工作时间" prop="field129">
                <el-time-picker v-model="formData.field129" format="HH:mm:ss" value-format="HH:mm:ss"
                    :picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
                    placeholder="请选择参加工作时间" clearable></el-time-picker>
            </el-form-item>
            <el-form-item label="入党时所在支部" prop="field130">
                <el-input v-model="formData.field130" placeholder="请输入入党时所在支部" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="转正时所在支部" prop="field131">
                <el-input v-model="formData.field131" placeholder="请输入转正时所在支部" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="入党介绍人" prop="field132">
                <el-input v-model="formData.field132" placeholder="请输入入党介绍人" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="所在支部" prop="field133">
                <el-input v-model="formData.field133" placeholder="请输入所在支部" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="进入党支部日期" prop="field134">
                <el-date-picker v-model="formData.field134" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择进入党支部日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="现任党内职务" prop="field135">
                <el-input v-model="formData.field135" placeholder="请输入现任党内职务" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="学历学位" prop="field136">
                <el-input v-model="formData.field136" placeholder="请输入学历学位" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="毕业院校系及专业" prop="field138">
                <el-input v-model="formData.field138" placeholder="请输入毕业院校系及专业" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="工作单位及职务" prop="field139">
                <el-input v-model="formData.field139" placeholder="请输入工作单位及职务" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="组织关系所在单位" prop="field140">
                <el-input v-model="formData.field140" placeholder="请输入组织关系所在单位" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="户籍所在地" prop="field141">
                <el-input v-model="formData.field141" placeholder="请输入户籍所在地" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="现居住地" prop="field142">
                <el-input v-model="formData.field142" placeholder="请输入现居住地" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="field143">
                <el-input v-model="formData.field143" placeholder="请输入身份证号码" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="field144">
                <el-input v-model="formData.field144" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="流出日期" prop="field147">
                <el-date-picker v-model="formData.field147" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择流出日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="外出流向" prop="field148">
                <el-input v-model="formData.field148" placeholder="请输入外出流向" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="外出类型" prop="field149">
                <el-input v-model="formData.field149" placeholder="请输入外出类型" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="外出原因" prop="field150">
                <el-input v-model="formData.field150" placeholder="请输入外出原因" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="活动证号码" prop="field151">
                <el-input v-model="formData.field151" placeholder="请输入活动证号码" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="与党组织联系情况" prop="field152">
                <el-input v-model="formData.field152" placeholder="请输入与党组织联系情况" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="流出支部联系人及联系方式" prop="field153">
                <el-input v-model="formData.field153" placeholder="请输入流出支部联系人及联系方式" clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="流入支部联系人及联系方式" prop="field154">
                <el-input v-model="formData.field154" placeholder="请输入流入支部联系人及联系方式" clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="流入地(单位)" prop="field157">
                <el-input v-model="formData.field157" placeholder="请输入流入地(单位)" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="失去联系日期" prop="field156">
                <el-date-picker v-model="formData.field156" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择失去联系日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="出国日期" prop="field160">
                <el-date-picker v-model="formData.field160" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择出国日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="出国原因" prop="field161">
                <el-input v-model="formData.field161" placeholder="请输入出国原因" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="出国后与组织联系情况" prop="field162">
                <el-input v-model="formData.field162" placeholder="请输入出国后与组织联系情况" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="党籍处理方式" prop="field163">
                <el-input v-model="formData.field163" placeholder="请输入党籍处理方式" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item label="回国日期" prop="field165">
                <el-date-picker v-model="formData.field165" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择回国日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="恢复组织生活情况" prop="field166">
                <el-input v-model="formData.field166" placeholder="请输入恢复组织生活情况" clearable :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    components: {},
    props: [],
    data() {
        return {
            formData: {
                field113: undefined,
                field117: undefined,
                field122: null,
                field123: null,
                field124: undefined,
                field125: undefined,
                field126: undefined,
                field127: null,
                field128: null,
                field129: null,
                field130: undefined,
                field131: undefined,
                field132: undefined,
                field133: undefined,
                field134: null,
                field135: undefined,
                field136: undefined,
                field138: undefined,
                field139: undefined,
                field140: undefined,
                field141: undefined,
                field142: '',
                field143: '',
                field144: undefined,
                field147: null,
                field148: undefined,
                field149: undefined,
                field150: undefined,
                field151: undefined,
                field152: undefined,
                field153: undefined,
                field154: undefined,
                field157: undefined,
                field156: null,
                field160: null,
                field161: undefined,
                field162: undefined,
                field163: undefined,
                field165: null,
                field166: undefined,
            },
            rules: {
                field113: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur'
                }],
                field117: [{
                    required: true,
                    message: '请选择性别',
                    trigger: 'change'
                }],
                field122: [{
                    required: true,
                    message: '请选择出生年月',
                    trigger: 'change'
                }],
                field124: [{
                    required: true,
                    message: '请输入民族',
                    trigger: 'blur'
                }],
                field125: [{
                    required: true,
                    message: '请输入籍贯',
                    trigger: 'blur'
                }],
                field126: [{
                    required: true,
                    message: '请选择婚姻状况',
                    trigger: 'change'
                }],
                field127: [{
                    required: true,
                    message: '请选择入党时间',
                    trigger: 'change'
                }],
                field128: [{
                    required: true,
                    message: '请选择转正时间',
                    trigger: 'change'
                }],
                field129: [{
                    required: true,
                    message: '请选择参加工作时间',
                    trigger: 'change'
                }],
                field130: [{
                    required: true,
                    message: '请输入入党时所在支部',
                    trigger: 'blur'
                }],
                field131: [{
                    required: true,
                    message: '请输入转正时所在支部',
                    trigger: 'blur'
                }],
                field132: [{
                    required: true,
                    message: '请输入入党介绍人',
                    trigger: 'blur'
                }],
                field133: [{
                    required: true,
                    message: '请输入所在支部',
                    trigger: 'blur'
                }],
                field134: [{
                    required: true,
                    message: '请选择进入党支部日期',
                    trigger: 'change'
                }],
                field135: [{
                    required: true,
                    message: '请输入现任党内职务',
                    trigger: 'blur'
                }],
                field136: [{
                    required: true,
                    message: '请输入学历学位',
                    trigger: 'blur'
                }],
                field138: [{
                    required: true,
                    message: '请输入毕业院校系及专业',
                    trigger: 'blur'
                }],
                field139: [{
                    required: true,
                    message: '请输入工作单位及职务',
                    trigger: 'blur'
                }],
                field140: [{
                    required: true,
                    message: '请输入组织关系所在单位',
                    trigger: 'blur'
                }],
                field141: [{
                    required: true,
                    message: '请输入户籍所在地',
                    trigger: 'blur'
                }],
                field142: [{
                    required: true,
                    message: '请输入现居住地',
                    trigger: 'blur'
                }],
                field143: [{
                    required: true,
                    message: '请输入身份证号码',
                    trigger: 'blur'
                }, {
                    pattern: /^[1-9]\d{5}\d{4}\d{2}\d{2}\d{2}\d(\d|X)$/,
                    message: '身份证格式错误',
                    trigger: 'blur'
                }],
                field144: [{
                    required: true,
                    message: '请输入联系电话',
                    trigger: 'blur'
                }, {
                    pattern: /^[1](3|[5-9])\d{9}$/,
                    message: '电话号码格式错误',
                    trigger: 'blur'
                }, {
                    pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
                    message: '电话号码格式错误',
                    trigger: 'blur'
                }, {
                    pattern: /^(?:\+86)?1[3-9]\d{9}$|^0[1-9]\d{1,2}-[2-8]\d{6,7}$/,
                    message: '电话号码格式错误',
                    trigger: 'blur'
                }],
            },
            field123Action: 'https://jsonplaceholder.typicode.com/posts/',
            field123fileList: [],
            field117Options: [{
                "label": "男",
                "value": 1
            }, {
                "label": "女",
                "value": 2
            }],
            field126Options: [{
                "label": "未婚",
                "value": 1
            }, {
                "label": "已婚",
                "value": 2
            }, {
                "label": "丧偶",
                "value": ""
            }, {
                "label": "离婚",
                "value": ""
            }],
            field147: [{
                required: true,
                message: '请选择流出日期',
                trigger: 'change'
            }],
            field148: [{
                required: true,
                message: '请输入外出流向',
                trigger: 'blur'
            }],
            field149: [{
                required: true,
                message: '请输入外出类型',
                trigger: 'blur'
            }],
            field150: [{
                required: true,
                message: '请输入外出原因',
                trigger: 'blur'
            }],
            field151: [{
                required: true,
                message: '请输入活动证号码',
                trigger: 'blur'
            }],
            field152: [{
                required: true,
                message: '请输入与党组织联系情况',
                trigger: 'blur'
            }],
            field153: [{
                required: true,
                message: '请输入流出支部联系人及联系方式',
                trigger: 'blur'
            }],
            field154: [{
                required: true,
                message: '请输入流入支部联系人及联系方式',
                trigger: 'blur'
            }],
            field157: [{
                required: true,
                message: '请输入流入地(单位)',
                trigger: 'blur'
            }],
            field156: [{
                required: true,
                message: '请选择失去联系日期',
                trigger: 'change'
            }],
            field160: [{
                required: true,
                message: '请选择出国日期',
                trigger: 'change'
            }],
            field161: [{
                required: true,
                message: '请输入出国原因',
                trigger: 'blur'
            }],
            field162: [{
                required: true,
                message: '请输入出国后与组织联系情况',
                trigger: 'blur'
            }],
            field163: [{
                required: true,
                message: '请输入党籍处理方式',
                trigger: 'blur'
            }],
            field165: [{
                required: true,
                message: '请选择回国日期',
                trigger: 'change'
            }],
            field166: [{
                required: true,
                message: '请输入恢复组织生活情况',
                trigger: 'blur'
            }],
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        field123BeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
    }
}

</script>
<style>
.el-upload__tip {
    line-height: 1.2;
}
</style>
  